<div class="toolbar"></div>
<div class="p-3">
    <div class="card mb-3">
        <h5 class="card-header">图片</h5>
        <div class="card-body">
            <p class="text-muted">图片指令可以设置加载失败时的默认图片</p>
        </div>
    </div>
    <div class="card">
        <div class="card-header bg-white">设置默认图片</div>
        <div class="card-body">
            <img class="img-thumbnail" src="xx.jpg" dataSrc="assets/images/404.jpg" width="100">
            <img class="img-thumbnail ml-2" src="assets/images/avatar/0.jpg" dataSrc="assets/images/404.jpg"
                width="100">
            <p class="mt-3">
                在图片标签中添加<code>dataScr</code>指令,并设置值：<code>dataSrc="失败时的图片"</code>
            </p>
        </div>
    </div>
    <div class="card mt-2">
        <div class="card-header bg-white">图片裁剪/图片涂鸦</div>
        <div class="card-body">
            <!-- 裁剪 -->
            <input tsFile (change)="showClipWindow($event.target.files)" #fileInput="tsFile" type="file"
                accept="image/*">
            <img (click)="fileInput.openFileDialog()" [src]="clipImg" dataSrc="assets/images/404.jpg"
                class="img-thumbnail pointer mr-2" width="100">

            <!-- 涂鸦 -->
            <input tsFile (change)="showDrawWindow($event.target.files)" #drawFileInput="tsFile" type="file"
                accept="image/*">
            <img (click)="drawFileInput.openFileDialog()" [src]="drawImg" dataSrc="assets/images/404.jpg"
                class="img-thumbnail pointer" width="100">
        </div>
    </div>
</div>